<template>
  <div class="moveNodeDialog">
    <dialogPublic
      title="选择移动至某节点下"
      :show.sync="showDialong"
      @doSubmit="doSave"
      @doClose="doClose"
      appendTobody
      width="30%"
      height="600px"
      class="moveNodeSelecet"
    >
      <div class="topSelect">
        <div class="topLabel">移动到目标节点的位置：</div>
        <div class="selectDiv">
          <el-select v-model="location">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="treeDiv">
        <editTree
          ref="nodeTree"
          v-if="showTree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          showCheckbox
          checkStrictly
          :optionalNum="optionalNum"
          :haveRemark="haveRemark"
        />
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import { locationTree } from "@/api/equipmentLedger/locationManage";
export default {
  components: {},
  props: {
    currentNode: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    formData: {
      handler: function(val) {
        this.treeSetting.treeData = val;
      },
      deep: true
    }
  },
  name: "editDialog",
  data() {
    return {
      optionalNum: 1,
      showDialong: true,
      haveRemark: true,
      showCheckbox: true,
      showTree: false,
      hideBtn: true,
      options: [
        {
          value: "0",
          label: "子节点"
        },
        {
          value: "1",
          label: "上方"
        },
        {
          value: "-1",
          label: "下方"
        }
      ],
      location: "0",
      treeData: [],
      treeSetting: {
        data: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
        clickExpand: true, //是否点击节点展开
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getTreeData();
    },
    //获取设备树
    getTreeData() {
      locationTree().then(res => {
        this.treeData = res.data;
        this.setDisabledNode(this.treeData);
        this.treeSetting.data = this.treeData;
        this.showTree = true;
      });
    },
    //禁用树节点
    setDisabledNode(node, isChild) {
      for (let item of node) {
        let children = item.children || [];
        if (isChild) {
          //子节点
          item.disabled = true;
          if (children.length) {
            this.setDisabledNode(item.children, true);
          }
        } else {
          if (item.id == this.currentNode.id) {
            //当前节点
            item.disabled = true;
            if (children.length) {
              this.setDisabledNode(item.children, true);
            }
          } else {
            if (children.length) {
              this.setDisabledNode(item.children);
            }
          }
        }
      }
    },
    doClose() {
      this.$emit("update:showSelete", false);
    },
    doSave() {
      let list = this.$refs.nodeTree.getCheckedNodes();
      let { id, sort } = list[0];
      let form = {
        parentId: id,
        id: this.currentNode.id
      };
      switch (this.location) {
        //上方
        case "1":
          form.sort = sort - 1;
          break;
        //下方
        case "-1":
          form.sort = sort + 1;
          break;
      }
      this.$emit("changeSelete", form);
      this.doClose();
    }
  }
};
</script>

<style lang='less'>
.moveNodeSelecet {
  height: 100%;
  .el-dialog .el-dialog__body {
    height: 600px !important;
  }
  .edit-tree-content {
    overflow-y: auto;
    overflow-x: auto;
  }
  .topSelect {
    height: 35px;
    display: flex;
    flex-flow: wrap nowrap;
    .topLabel {
      width: 175px;
      line-height: 35px;
    }
    .el-input__inner {
      height: 35px;
      line-height: 35px;
    }
  }
}
.treeDiv {
  height: calc(100% - 50px);
}
</style>